<template>
  <div class="addSetMeal" style="height:100%">
    <div class="pageTitleSubTitle">
      <div class="title" @click="back"><a-icon type="left" style="margin-right: 10px"/>{{type === 1?'添加':type === 2?'修改':'查看'}}卡项</div>
    </div>
    <div class="addData">
      <Append @sendData="getAppendData" ref="child" :appendData="configAppend" />
    </div>
    <div class="storeContent" style="height:calc(100% - 240px);background:#F5F5F5">
      <div class="storeTable" v-for="(item,index) in goodsTable" :key="index">
        <div class="tableList">
          <span>{{item.name}}</span>
          <a-button type="primary" @click="openModal(item.type)"><a-icon type="plus"></a-icon>添加{{item.name}}</a-button>
        </div>
        <a-table
          :rowKey="record => record.id"
          :columns="item.columns"
          :data-source="item.columnsData"
          :pagination="false"
          style="width: 100%"
        >
          <span slot="picture" slot-scope="picture"><img style="width:61px;border-radius: 2px" :src="picture" alt=""></span>
          <span slot="num" slot-scope="num"><a-input style="width:80px" type="number" v-model="num" /></span>
          <span slot="price" slot-scope="price,record" class="operation">
          <span @click="removeGoods(record,index)">删除</span>
        </span>
        </a-table>
      </div>
      <div class="configAdd" v-if="type !== 3">
        <a-button class="modalCloseBtn" @click="back">取消</a-button>
        <a-button class="modalConfigBtn" type="primary" @click="addSetMeal">确定</a-button>
      </div>
    </div>
    <a-modal
      v-model="visible"
      :title="title"
      width="650px"
      cancelText="关闭"
      okText="保存">
      <AppendGood v-if="visible" @sendData="getAppendGood" ref="childGood" :good_type="addType"/>
      <template slot="footer">
        <a-button class="modalCloseBtn" @click="modalChange(1)">关闭</a-button>
        <a-button class="modalConfigBtn" type="primary" :loading="loading" @click="modalChange(2)">保存</a-button>
      </template>
    </a-modal>
  </div>
</template>i
<script>
  import Append from './append'
  import AppendGood from './appendGood'
  import { goodsList } from './index.js'
  export default {
    name:'addSetMeal',
    components:{Append,AppendGood},
    data(){
      return{
        type:1, //1添加2修改3查看
        addType:1,
        visible:false,
        title:'添加商品',
        loading: false,
        configAppend:[
          {
            name:'卡项分类',
            type:'cascader',
            must:true,
            val:[],
            place:'请选择分类',
            key:['cate_id','cate_sub_id'],
            selectData:[],
          },
          {
            name:'卡项名称',
            type:'input',
            val:'',
            must:true,
            place:'请输入名称',
            key:'name',
          },
          {
            name:'卡项类型',
            type:'select',
            val:'',
            must:true,
            place:'请选择类型',
            idKey:'id',
            nameKey:'name',
            key:'card_item_type',
            selectData: [
              {id:1,name:'赠送'},
              {id:2,name:'售卖'}
            ]
          },
          {
            name:'赠送类型',
            type:'select',
            val:'',
            must:false,
            place:'请选择类型',
            idKey:'id',
            nameKey:'name',
            key:'gift_type',
            selectData: [
              {id:1,name:'产品'},
              {id:2,name:'品项'},
              {id:3,name:'套餐'},
              {id:4,name:'金额'},
              {id:5,name:'项目'}
            ]
          },
          {
            name:'卡项售价',
            type:'input',
            val:'',
            must:true,
            place:'请输入售价',
            key:'price',
          },
          {
            name:'卡项面值',
            type:'input',
            val:'',
            must:true,
            place:'请输入面值',
            key:'card_face',
          },
          {
            name:'最低充值',
            type:'input',
            val:'',
            must:false,
            place:'请输入金额',
            key:'min_recharge',
          },
          {
            name:'储值金额',
            type:'input',
            val:'',
            must:false,
            place:'请输入金额',
            key:'card_stored',
          },
          {
            name:'提成比例',
            type:'input',
            val:'',
            must:false,
            place:'请输入比例',
            key:'commission',
          },
          {
            name:'有效期',
            type: 'aTime',
            val:'',
            long:'0',
            must: true,
            key:'period',
            place:'请输入有效期'
          }
        ],
        goodsTable:[]
      }
    },
    created() {
      this.getCates();
      this.goodsTable = goodsList;
      this.type = Number(this.$route.query.type);
      if(this.$route.query.id){
        this.getDetail(this.$route.query.id)
      }
    },
    methods:{
      openModal(type){
        this.title = type === 1?'添加商品':type === 2?'添加服务':type === 3?'添加套餐':'添加品相';
        this.addType = type;
        this.visible = true;
      },
      getDetail(id){
        this.Api.cardsDetail({},id).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.goodsTable.forEach(item=>{
            let configItems = [];
            if(res.data.hasOwnProperty(item.key) &&  res.data[item.key] && res.data[item.key].length >=0){
              res.data[item.key].forEach(demo=>{
                demo.item.num = demo.item.stock;
                configItems.push(demo.item)
              })
            }
            item.columnsData = configItems
          });
          this.configAppend.forEach(item=>{
            if(item.type === 'cascader'){
              item.val = [res.data.goods_cate.id,res.data.goods_sub_cate.id]
            }else if(item.hasOwnProperty('long')){
              item.long = res.data.period == '0'?'0':'1';
              item.val = res.data.period != 0?res.data.period:'';
            }else{
              item.val = res.data[item.key]
            }
          });
        })
      },
      getAppendGood(datas){
        datas.forEach(item=>{
          item.num = item.stock;
          this.goodsTable[this.addType - 1].columnsData.push(item);
        });
        this.visible = false
      },
      getAppendData(e){
        let goods = [];
        this.goodsTable.forEach(item=>{
          item.columnsData.forEach(demo=>{
            let obj = {good_no:demo.good_no,number:demo.num};
            goods.push(obj)
          });
        });
        e.goods = goods;
        let info = JSON.parse(sessionStorage.getItem('search'));
        let configData = {...e,...info};
        if(configData.card_item_type == 2) configData.gift_type = 0;
        if(this.type === 1) return this.Api.addCard(configData).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.$message.success(res.msg);
          this.$router.push({path:'/card'})
        });
        if(this.type === 2) return this.Api.editCard(configData,this.$route.query.id).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.$message.success(res.msg);
          this.$router.push({path:'/card'})
        })
      },
      addSetMeal(){
        this.$refs.child.sendData()
      },
      modalChange(type){
        if(type === 1) return this.visible = false;
        this.$refs.childGood.sendGoods()
      },
      removeGoods(item,index){
        this.goodsTable[index].columnsData.forEach((demo,idx) =>{
          if(item.id === demo.id){
            this.goodsTable[index].columnsData.splice(idx,1)
          }
        })
      },
      back(){
        history.go(-1)
      },
      getCates(){
        this.Api.cates({type:3}).then(res=>{
          let data = res.data;
          data.forEach(item=>{
            item.label = item.name;
            item.value = item.id;
            item.children = item.child;
            item.children.forEach(demo=>{
              demo.label = demo.name;
              demo.value = demo.id;
              demo.children = demo.child;
              if(demo.children && demo.children.length<=0) delete demo.children
            })
          });
          this.configAppend.forEach(item => {
            if (item.type === 'cascader') item.selectData = data
          });
        })
      },
    }
  }
</script>
<style lang="less" scoped>
  .addSetMeal{
    .pageTitleSubTitle{
      .title{
        cursor: pointer;
      }
    }
    .storeContent{
      padding: 0;
      .storeTable{
        padding: 16px 24px;
        box-sizing: border-box;
        background: #ffffff;
        margin-bottom: 8px;
        .tableList{
          display: flex;
          justify-content: space-between;
          margin-bottom: 16px;
          span{
            color: #333333;
            font-size: 16px;
          }
        }
      }
      .configAdd{
        text-align: right;
        background: #ffffff;
        padding: 16px 24px;
        .ant-btn{
          margin-right: 24px;
        }
        .ant-btn:nth-last-child(1){
          margin-right: 0;
        }
      }
    }
    .addData{
      margin: 8px 0;
      background: #ffffff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      padding: 21px 16px 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
  }
</style>
